<template>
  <div id="app">
    <el-container>
      <!-- 头部 -->
      <el-header>
        <div class="logo">
          <!-- 控制显示隐藏 -->
          <div style="margin: 0 20px" @click="isShow = !isShow">
            <i class="el-icon-s-unfold" v-if="isShow"></i>
            <i class="el-icon-s-fold" v-else></i>
          </div>

          <span>电商后台管理系统</span>
        </div>
        <!-- 头像信息 -->
        <div class="head" @click="tcShow = !tcShow">
          <img
            src="https://lin-xin.gitee.io/example/work/static/img/img.146655c9.jpg"
            alt=""
            width="40px"
            height="40px"
            style="border-radius: 20px; vertical-align: middle"
          />
          <span style="color: #fff; margin-left: 10px">admin</span>
          <i class="el-icon-caret-bottom"></i>

          <!-- 退出按钮 -->
          <div class="button" v-show="tcShow">
            <el-button
              type="warning"
              class="btn"
              round
              @click="clearToken"
              size="mini"
              >退出</el-button
            >
          </div>
        </div>
      </el-header>
      <!-- 左侧栏 -->
      <el-container>
        <el-aside :width="!isShow ? '200px' : '65px'">
          <aside-left :show="isShow"></aside-left>
        </el-aside>
        <!-- 右侧内容 -->
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import asideLeft from '../components/home/aside'
export default {
  components: { asideLeft },
  data () {
    return {
      isShow: false,
      tcShow: false
    }
  },
  methods: {
    //   退出按钮
    clearToken () {
      const t = window.confirm('是否退出登录')
      if (t) {
        window.sessionStorage.clear('token')
        this.$message.success('退出成功')
        this.$router.push('/login')
      } else {
        this.$message.error('取消退出')
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.el-container {
  //   background: #000;
  height: 100%;
}
.el-header {
  background: #242f42;
  //   line-height: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .logo {
    display: flex;
    align-items: center;
    color: #fff;
    font-size: 22px;
  }
}

.el-aside {
  //   background: rgb(27, 27, 27);
  background: #324157;
}
.el-main {
  background: #fff;
}

.el-icon-caret-bottom {
  color: #fff;
  font-size: 18px;
}
.head {
  position: relative;
}
.button {
  text-align: center;
  width: 130px;
  background: #fff;
  position: absolute;
  bottom: -40px;
  // left: 10px;
}
</style>
